<?php
$title = '我的运动类统计';
require_once('head.php');
if ($islogin != 1) {
    exit("<script language='javascript'>window.location.href='/login.php';</script>");
}
?>

<div class="app-content-body">
    <div class="wrapper-md control" id="userSportsStatsApp">
        <!-- 头部统计卡片 -->
        <div class="row">
            <div class="col-sm-3">
                <div class="panel panel-default" style="border-left: 4px solid #33cabb; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div class="panel-body">
                        <div class="clearfix">
                            <div class="pull-left">
                                <i class="el-icon-data-line text-primary" style="font-size: 48px; color: #33cabb;"></i>
                            </div>
                            <div class="pull-right text-right">
                                <p class="h3 m-t-xs">{{totalSportsData.totalOrders}}</p>
                                <p class="text-muted">总订单数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="panel panel-default" style="border-left: 4px solid #f44336; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div class="panel-body">
                        <div class="clearfix">
                            <div class="pull-left">
                                <i class="el-icon-money text-danger" style="font-size: 48px; color: #f44336;"></i>
                            </div>
                            <div class="pull-right text-right">
                                <p class="h3 m-t-xs">¥{{formatNumber(totalSportsData.totalOrderAmount)}}</p>
                                <p class="text-muted">总订单金额</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="panel panel-default" style="border-left: 4px solid #4caf50; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div class="panel-body">
                        <div class="clearfix">
                            <div class="pull-left">
                                <i class="el-icon-refresh text-success" style="font-size: 48px; color: #4caf50;"></i>
                            </div>
                            <div class="pull-right text-right">
                                <p class="h3 m-t-xs">{{totalSportsData.totalRefunds}}</p>
                                <p class="text-muted">总退款数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="panel panel-default" style="border-left: 4px solid #ff9800; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div class="panel-body">
                        <div class="clearfix">
                            <div class="pull-left">
                                <i class="el-icon-bank-card text-warning" style="font-size: 48px; color: #ff9800;"></i>
                            </div>
                            <div class="pull-right text-right">
                                <p class="h3 m-t-xs">¥{{formatNumber(totalSportsData.netIncome)}}</p>
                                <p class="text-muted">收入</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 今日统计 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">今日运动类订单概览</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <el-card class="box-card" shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>今日订单数</span>
                                    </div>
                                    <div class="text item">
                                        <h3 style="color: #409EFF;">{{totalSportsData.todayOrders}}</h3>
                                    </div>
                                </el-card>
                            </div>
                            <div class="col-xs-3">
                                <el-card class="box-card" shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>今日订单金额</span>
                                    </div>
                                    <div class="text item">
                                        <h3 style="color: #F56C6C;">¥{{formatNumber(totalSportsData.todayOrderAmount)}}</h3>
                                    </div>
                                </el-card>
                            </div>
                            <div class="col-xs-3">
                                <el-card class="box-card" shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>今日退款数</span>
                                    </div>
                                    <div class="text item">
                                        <h3 style="color: #67C23A;">{{totalSportsData.todayRefunds}}</h3>
                                    </div>
                                </el-card>
                            </div>
                            <div class="col-xs-3">
                                <el-card class="box-card" shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>今日收入</span>
                                    </div>
                                    <div class="text item">
                                        <h3 style="color: #E6A23C;">¥{{formatNumber(totalSportsData.todayNetIncome)}}</h3>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 各个运动项目的图表 -->
        <div class="row" v-for="(sportData, key) in sportsData" :key="key">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">{{sportData.name}} 统计数据</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <!-- 基础统计信息 -->
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <el-card class="box-card mini-card" shadow="hover">
                                            <div class="text-center">
                                                <p>总订单数</p>
                                                <h4>{{sportData.stats.totalOrders}}</h4>
                                            </div>
                                        </el-card>
                                    </div>
                                    <div class="col-xs-6">
                                        <el-card class="box-card mini-card" shadow="hover">
                                            <div class="text-center">
                                                <p>总金额</p>
                                                <h4>¥{{formatNumber(sportData.stats.totalOrderAmount)}}</h4>
                                            </div>
                                        </el-card>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 10px;">
                                    <div class="col-xs-6">
                                        <el-card class="box-card mini-card" shadow="hover">
                                            <div class="text-center">
                                                <p>总退款数</p>
                                                <h4>{{sportData.stats.totalRefunds}}</h4>
                                            </div>
                                        </el-card>
                                    </div>
                                    <div class="col-xs-6">
                                        <el-card class="box-card mini-card" shadow="hover">
                                            <div class="text-center">
                                                <p>总退款金额</p>
                                                <h4>¥{{formatNumber(sportData.stats.totalRefundAmount)}}</h4>
                                            </div>
                                        </el-card>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 10px;">
                                    <div class="col-xs-12">
                                        <el-card class="box-card mini-card" shadow="hover">
                                            <div class="text-center">
                                                <p>收入</p>
                                                <h4 :style="{ color: sportData.stats.netIncome >= 0 ? '#67C23A' : '#F56C6C' }">
                                                    ¥{{formatNumber(sportData.stats.netIncome)}}
                                                </h4>
                                            </div>
                                        </el-card>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 趋势图 -->
                            <div class="col-md-8">
                                <div :id="'chart-' + key" style="width: 100%; height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="assets/LightYear/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/LightYear/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/LightYear/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="assets/LightYear/js/main.min.js"></script>
<script type="text/javascript" src="assets/LightYear/js/echarts.min.js"></script>
<script src="assets/js/aes.js"></script>
<script src="assets/js/vue.min.js"></script>
<script src="assets/js/vue-resource.min.js"></script>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/element.js"></script>

<script>
// 初始化Vue实例
new Vue({
    el: "#userSportsStatsApp",
    data: {
        totalSportsData: {
            totalOrders: 0,
            totalOrderAmount: 0,
            totalRefunds: 0,
            totalRefundAmount: 0,
            todayOrders: 0,
            todayOrderAmount: 0,
            todayRefunds: 0,
            todayRefundAmount: 0,
            netIncome: 0,
            todayNetIncome: 0
        },
        sportsData: {}
    },
    mounted() {
        this.loadData();
    },
    methods: {
        formatNumber(num) {
            return parseFloat(num).toFixed(2);
        },
        loadData() {
            // 显示加载中提示
            const loading = this.$loading({
                lock: true,
                text: '加载数据中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            
            // 通过Ajax从后端API获取数据
            $.ajax({
                url: '/apisub.php?act=getUserSportsStatisticsData',
                type: 'POST',
                dataType: 'json',
                success: (response) => {
                    loading.close();
                    if (response.code === 1) {
                        // 更新数据
                        this.totalSportsData = response.totalSportsData;
                        this.sportsData = response.sportsData;
                        
                        // 初始化图表
                        this.$nextTick(() => {
                            this.initCharts();
                        });
                    } else {
                        // 显示错误消息
                        this.$message.error(response.msg || '获取数据失败');
                    }
                },
                error: () => {
                    loading.close();
                    this.$message.error('请求失败，请检查网络连接');
                }
            });
        },
        
        initCharts() {
            // 初始化每个运动类型的图表
            for (const [key, sportData] of Object.entries(this.sportsData)) {
                this.initSportChart(key, sportData);
            }
        },
        
        initSportChart(key, sportData) {
            const chartDom = document.getElementById('chart-' + key);
            if (!chartDom) return;
            
            const myChart = echarts.init(chartDom);
            const chartData = sportData.stats.chartData;
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['订单金额', '退款金额', '收入'],
                    bottom: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.dates
                },
                yAxis: {
                    type: 'value',
                    name: '金额（元）',
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                series: [
                    {
                        name: '订单金额',
                        type: 'bar',
                        stack: 'total',
                        barWidth: '40%',
                        data: chartData.orderData,
                        itemStyle: {
                            color: '#409EFF'
                        }
                    },
                    {
                        name: '退款金额',
                        type: 'bar',
                        stack: 'total',
                        barWidth: '40%',
                        data: chartData.refundData.map(v => -v), // 将退款金额显示为负值
                        itemStyle: {
                            color: '#F56C6C'
                        }
                    },
                    {
                        name: '收入',
                        type: 'line',
                        data: chartData.netIncomeData,
                        lineStyle: {
                            color: '#67C23A'
                        },
                        itemStyle: {
                            color: '#67C23A'
                        },
                        symbol: 'circle',
                        symbolSize: 8
                    }
                ]
            };
            
            myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    }
});
</script>

<style>
.el-card {
    margin-bottom: 10px;
}
.el-card .text {
    font-size: 14px;
}
.el-card .item {
    margin-bottom: 18px;
}
.panel {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.panel-heading {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ebeef5;
    padding: 15px;
}
.panel-body {
    padding: 20px;
}
.panel-title {
    margin: 0;
    font-size: 16px;
    color: #303133;
    font-weight: 500;
}
.mini-card {
    padding: 5px;
    margin-bottom: 5px;
}
.mini-card p {
    margin: 0;
    font-size: 12px;
    color: #909399;
}
.mini-card h4 {
    margin: 5px 0;
    font-weight: bold;
}
</style> 